<template>
  <view class="profile-container">
    <!-- 顶部装饰 -->
    <view class="header-decoration">
      <view class="wave-bg"></view>
      <view class="floating-elements">
        <view class="element element-1"></view>
        <view class="element element-2"></view>
      </view>
    </view>
    
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="avatar-section">
        <view class="avatar-wrapper">
          <image class="profile-avatar" src="/static/avatar.png" />
          <view class="avatar-ring"></view>
        </view>
        <view class="user-info">
          <text class="user-name">{{ userInfo ? userInfo.nickName : '未设置' }}</text>
          <text class="user-company">鱼邦 · 智慧渔业</text>
        </view>
      </view>
      <view class="status-badge" :class="{ 'online': userInfo, 'offline': !userInfo }">
        <view class="status-dot"></view>
        <text class="status-text">{{ userInfo ? '已登录' : '未登录' }}</text>
      </view>
    </view>
    
    <!-- 信息列表 -->
    <view class="info-sections">
      <view class="info-section">
        <view class="section-title">
          <text class="title-text">基本信息</text>
        </view>
        <view class="info-list">
        
          <view class="info-item">
            <view class="info-icon">📱</view>
            <view class="info-content">
              <text class="info-label">手机号码</text>
              <text class="info-value">{{ phoneNumber ? phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : '未绑定' }}</text>
            </view>
          </view>
          <view class="info-item">
            <view class="info-icon">🏢</view>
            <view class="info-content">
              <text class="info-label">所属企业</text>
              <text class="info-value">鱼邦</text>
            </view>
          </view>
        </view>
      </view>
      
    </view>
    
    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="action-btn primary full-width" @click="logout">
        <text class="btn-icon">🚪</text>
        <text class="btn-text">退出登录</text>
      </button>
    </view>
  </view>
</template>

<script>
import userManager from '../../utils/user-manager.js'
import ErrorHandler from '../../utils/error-handler.js'

export default {
  name: "ProfilePage",
  data() {
    return {
      userInfo: null,
      phoneNumber: ''
    }
  },
  
  onLoad() {
    // 加载用户信息
    this.loadUserInfo()
  },
  
  methods: {
    /**
     * 加载用户信息
     */
    loadUserInfo() {
      try {
        const allUserData = userManager.getAllUserData()
        this.userInfo = allUserData.userInfo
        this.phoneNumber = allUserData.phoneData.phoneNumber
        
        // 如果用户有手机号但没有基本信息，创建一个默认的用户信息对象
        if (this.phoneNumber && !this.userInfo) {
          this.userInfo = {
            nickName: '手机用户',
            avatarUrl: '/static/avatar.png'
          }
        }
        
        console.log('📱 加载用户信息:', allUserData)
      } catch (error) {
        console.error('❌ 加载用户信息失败:', error)
      }
    },
    
    /**
     * 退出登录
     */
    logout() {
      ErrorHandler.showConfirm(
        '确认退出',
        '确定要退出登录吗？退出后将清除所有缓存数据。',
        () => {
          try {
            // 使用用户管理工具的退出登录方法
            userManager.logout()
            
            // 清除其他可能的缓存数据
            this.clearAdditionalCache()
            
            // 显示成功提示
            ErrorHandler.showSuccess('退出成功!')
            
            // 延迟跳转，让用户看到提示
            setTimeout(() => {
              uni.reLaunch({ 
                url: '/pages/index/index' 
              })
            }, 1000)
            
          } catch (error) {
            ErrorHandler.handle(error, '退出登录')
          }
        }
      )
    },
    
    /**
     * 清除其他可能的缓存数据
     */
    clearAdditionalCache() {
      try {
        // 清除可能存在的其他缓存数据
        const additionalKeys = [
          'hasLoggedOut',
          'userLocation',
          'lastLoginTime',
          'appSettings',
          'photoData',
          'locationData',
          'formData',
		  "pondLocation",
		  "factoryLocation",
		  "factoryBillPhotos",
		  "factoryScenePhotos",
		  "botouFormData",
		  "pondScenePhotos"
        ]
        
        additionalKeys.forEach(key => {
          try {
            uni.removeStorageSync(key)
          } catch (error) {
            console.warn(`⚠️ 清除缓存 ${key} 失败:`, error)
          }
        })
        
        console.log('✅ 其他缓存数据清除完成')
      } catch (error) {
        console.error('❌ 清除其他缓存数据失败:', error)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.profile-container {
  background: $bg-secondary;
  min-height: 100vh;
  position: relative;
  padding-top: 160rpx;
  padding-bottom: 160rpx;
  box-sizing: border-box;
}

/* 顶部装饰 */
.header-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 160rpx;
  z-index: 1;
  overflow: hidden;
}

.wave-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, $primary 0%, $secondary 100%);
  border-radius: 0 0 30% 30%;
  transform: scale(1.1);
}

.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.element {
  position: absolute;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  animation: element-float 6s ease-in-out infinite;
}

.element-1 {
  width: 40rpx;
  height: 40rpx;
  top: 30%;
  left: 20%;
  animation-delay: 0s;
}

.element-2 {
  width: 60rpx;
  height: 60rpx;
  top: 60%;
  right: 25%;
  animation-delay: 3s;
}

@keyframes element-float {
  0%, 100% { transform: translateY(0px) scale(1); opacity: 0.6; }
  50% { transform: translateY(-20rpx) scale(1.1); opacity: 1; }
}

/* 用户信息卡片 */
.user-card {
  position: relative;
  z-index: 2;
  background: $bg-primary;
  margin: 0 30rpx 30rpx;
  border-radius: $radius-lg;
  padding: 30rpx;
  box-shadow: $shadow-lg;
  border: 1rpx solid $border-light;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.user-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(30, 136, 229, 0.03) 0%, rgba(38, 198, 218, 0.03) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.user-card:hover {
  transform: translateY(-2rpx);
  box-shadow: $shadow-xl;
  border-color: $primary;
}

.user-card:hover::before {
  opacity: 1;
}

.avatar-section {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.avatar-wrapper {
  position: relative;
}

.profile-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  border: 4rpx solid $text-white;
  box-shadow: $shadow-md;
}

.avatar-ring {
  position: absolute;
  top: -8rpx;
  left: -8rpx;
  right: -8rpx;
  bottom: -8rpx;
  border: 2rpx solid $primary;
  border-radius: 50%;
  animation: ring-pulse 2s ease-in-out infinite;
}

@keyframes ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.user-name {
  font-size: $font-xl;
  font-weight: 700;
  color: $text-primary;
}

.user-company {
  font-size: $font-sm;
  color: $text-secondary;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 16rpx;
  border-radius: $radius-xl;
  background: $bg-secondary;
}

.status-badge.online {
  background: rgba(16, 185, 129, 0.1);
}

.status-badge.offline {
  background: rgba(156, 163, 175, 0.1);
}

.status-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
}

.status-badge.online .status-dot {
  background: $success;
}

.status-badge.offline .status-dot {
  background: $text-tertiary;
}

.status-text {
  font-size: $font-sm;
  font-weight: 600;
  color: $text-primary;
}
/* 信息区域 */
.info-sections {
  position: relative;
  z-index: 2;
  padding: 0 30rpx;
}

.info-section {
  background: $bg-primary;
  border-radius: $radius-lg;
  margin-bottom: 20rpx;
  box-shadow: $shadow-md;
  border: 1rpx solid $border-light;
  overflow: hidden;
}

.section-title {
  background: $bg-secondary;
  padding: 20rpx 24rpx;
  border-bottom: 1rpx solid $border-light;
}

.title-text {
  font-size: $font-lg;
  font-weight: 600;
  color: $text-primary;
}

.info-list {
  padding: 0;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  border-bottom: 1rpx solid $border-light;
  transition: all 0.3s ease;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item:hover {
  background: $bg-secondary;
}

.info-icon {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  margin-right: 16rpx;
}

.info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.info-label {
  font-size: $font-sm;
  color: $text-tertiary;
}

.info-value {
  font-size: $font-md;
  font-weight: 600;
  color: $text-primary;
}

/* 操作按钮 */
.action-buttons {
  position: fixed;
  bottom: 30rpx;
  left: 30rpx;
  right: 30rpx;
  display: flex;
  justify-content: center;
  z-index: 10;
}

.action-btn {
  flex: 1;
  height: 88rpx;
  border: none;
  border-radius: $radius-xl;
  font-size: $font-lg;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  transition: all 0.3s ease;
  box-shadow: $shadow-md;
}

.action-btn.primary {
  background: linear-gradient(135deg, $error 0%, #f87171 100%);
  color: $text-white;
}

.action-btn:hover {
  transform: translateY(-2rpx);
  box-shadow: $shadow-lg;
}

.action-btn:active {
  transform: translateY(0);
  box-shadow: $shadow-sm;
}

.btn-icon {
  font-size: 24rpx;
}

.btn-text {
  font-size: $font-md;
}

.action-btn.full-width {
  flex: none;
  width: 100%;
}
</style>